import React from 'react'
import './index.scss'
import arrow_icon from './images/arrow.png'
import dian_icon from './images/dian.png'
import T from 'prop-types'
import { useHistory } from 'react-router-dom'

export default function NavBar(props) {
  const { roomName, right, showRight = true, rightClick=()=>{} } = props
  const history = useHistory()

  return (
    <>
      <div className="nav-bar">
        <div
          className="nav-bar-left"
          onClick={() => {
            history.goBack()
          }}
        >
          <img src={arrow_icon} alt="错误" />
        </div>
        <div className="nav-bar-center">{roomName}</div>
        <div
          className="nav-bar-right"
          style={{ visibility: showRight ? 'visible' : 'hidden' }}
          onClick={rightClick}
        >
          {right || <img src={dian_icon} alt="错误" />}
        </div>
      </div>
      <div className="nav-bar-bottom"></div>
    </>
  )
}
NavBar.propTypes = {
  roomName: T.string,
  right: T.element,
  showRight: T.bool,
  rightClick:T.func
}
